<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">分类型的设备数量</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_compared"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>



<script>
import echarts from 'echarts'
export default {
  name: "compared",
  data() {
    return {
      timer: null,
      tableData: []
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryDeviceType';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_compared'));
      let echartsData = [];
      for(let i=0;i<this.tableData.length;i++){
        let obj = {};
        obj.name = this.tableData[i].type;
        obj.value = this.tableData[i].count;
        echartsData.push(obj)
      }
      let showed = this.tableData && this.tableData.length ? false : true;
      let option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        color: ['#EAEA26', '#906BF9',  '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}个 ({d}%)'
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 5,
              type: 'solid'
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: '#0B4A6B',
            margin: 8,
            fontSize: 16
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B3E5E',
              width: 1,
              type: 'solid'
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: '#0B3E5E',
              width: 2,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: ['6%', '10%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 50
              },
              emphasis: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            data: [{
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: '#0B4A6B'
                }
              }
            }]
          }, {
            type: 'pie',
            radius: ['90%', '95%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 50
              },
              emphasis: {
                show: false
              }
            },
            tooltip: {
              show: false
            },
            data: [{
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: '#0B4A6B'
                }
              }
            }]
          },{
            stack: 'a',
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: '{b}'+'--'+'{c}个',
                textStyle: {
                  fontSize: 12,
                }
              }
            },
            data: echartsData
          }
        ]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.chartsdom {
    width: 100%;
    height: 95%;
  }
</style>
